<template>
  <div style="display: flex;margin-top:10px" v-show="countNum">
    <div class="process-content">
      <!--顶部内容显示，标题头，数目-->
      <!-- <span style="font-size: 14px">{{processTitle}}</span><span style="float: right;font-size: 14px">{{usageNum}}/{{countNum}}</span> -->
      <div>
        <!--外部进度条，灰色的总量为底-->
        <div class="pb-wrapper">
          <div class="pb-container">
            <!--分段数据，bgColoe为每段的颜色，[`${type}UsageRate`]为每段的宽度-->
            <div
              v-for="(item, index) in projectAdjustDataArray"
              :key="index"
              :title="`项目:${item.tenant},数量:${item.usage_count}`"
              class="pb-value"
              :style="{ background: item.bgColor, width: item[`${type}UsageRate`] }"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <!--修改总量-->
    <!-- <div style="width:90px"><el-input  :name="type" v-validate ="`numeric|min_value:${usageNum}`" @blur="setQuota" style="font-size: 13px"  v-model="newCountNum" placeholder="设置数量"></el-input>
            <span class="validate-message">{{ errors.first(`${type}`)}}</span>
        </div> -->
  </div>
</template>

<script>
export default {
  name: 'departmentQuotaProcess',
  props: {
    //类型，区分是哪一类数据
    type: {
      type: String,
      default: 'count'
    },
    //包括颜色及宽度数据
    projectAdjustDataArray: {
      type: Array
    },
    //标题
    processTitle: {
      type: String,
      default: '哈哈哈'
    },
    //已使用数据
    usageNum: {
      type: Number,
      default: 88
    },
    //总数据
    countNum: {
      type: Number,
      default: 100
    },

    rateName: {
      type: String
    }
  },

  data() {
    return {
      newCountNum: null,
      totalData: {
        count: 500
      }
    }
  },
  mounted() {},
  methods: {
    setQuota(event) {
      this.$validator.validate().then(result => {
        if (result) {
          this.$emit('setQuota', event, this.type, this.newCountNum)
          this.newCountNum = null
        }
      })
    }
  }
}
</script>

<style scoped>
.validate-message {
  display: contents;
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  padding-left: 4px;
  position: absolute;
  top: 100%;
  left: 0;
}
.process-content {
  width: calc(100% - 110px);
  height: 40px;
  margin-right: 20px;
}
.pb-wrapper {
  display: inline-block;
  padding-left: 30px;
  height: 54px;
  width: 100%;
  margin-top: 5px;
  /*border:1px solid #cfd0d2;*/
  position: relative;
  /* background: #cfd0d2; */
}
.pb-container {
  position: relative;
  left: -1px;
  margin-right: -2px;
  font: 1px/0 arial;
}
.pb-value {
  display: inline-block;
  height: 54px;
}
</style>
